<template>
  <view v-if="isShow" class="layer">
    <view class="layer_content">
      <image
        class="layer_content_bg"
        src="http://static.kuaimayoupin.com/0540921506402840.png"
        mode="aspectFit"
      ></image>
      <button
        class="btn"
        open-type="getPhoneNumber"
        @getphonenumber="decryptPhoneNumber"
        type="default"
      >
        <image src="@/static/images/home/wechat.png" mode="aspectFit"></image>
        <text>请先登录</text>
      </button>
      <image
        @click="close_layer"
        class="icon_close"
        src="../../static/images/home/icon_close.png"
        mode="aspectFit"
      ></image>

      <view class="protocol-wrapper"
        >登录即视为同意<span @click.stop="goProtocol('service')" class="protocol"
          >《服务协议》</span
        >和<span @click="goProtocol('privacy')" class="protocol">《隐私协议》</span></view
      >
    </view>
  </view>
</template>

<script>
import wxKeyManager from "@/util/getWXKey.js";
import { EventBus } from "@/util/event-bus.js";

export default {
  components: {},
  props: {
    isShow: Boolean,
  },
  data() {
    return {};
  },
  methods: {
    goProtocol(type) {
      uni.navigateTo({
        url: '/pageA/protocol/protocol?type=' +type
      })
    },
    decryptPhoneNumber(e) {
      let that = this;
      wxKeyManager.decryptPhoneNumber(e).then((res) => {
        console.log("wxkmanager-pohone---", res);
        // that.isShowLogin = false;
        // that.isLogin = true;
        EventBus.$emit("loginSuccess", true);
        // that.didCustomize = (res.customized || false) == true;
        // uni.reLaunch({
        //   url: "/pages/home2/home",
        // });
        // 刷新
        // that.reloadData();
      });
    },
    // decryptPhoneNumber(e) {
    //   this.$emit("decryptPhoneNumber", e);
    // },
    dismiss() {
      console.log("dismiss");
      this.$emit("dismiss");
    },
    bottomClick() {
      console.log("bottom click");
    },
    sendGiftAction() {
      console.log("sendGiftAction");
      this.showRoseDialog = true;
    },
    roseNotEnoughDismiss() {
      this.showRoseDialog = false;
    },
    close_layer() {
      this.dismiss();
    },
  },
  mounted() {
    console.log("hello gift");
  },
};
</script>

<style scoped lang="scss">
* {
  box-sizing: border-box;
  display: flex;
}

.layer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.4);

  .layer_content {
    width: 570rpx;
    height: 860rpx;
    border-radius: 12rpx;
    position: absolute;
    .layer_content_bg {
      height: 100%;
      width: 100%;
    }
    .btn {
      position: absolute;
      top: 642rpx;
      left: 0;
      right: 0;
      margin: 0 auto;
      width: 420rpx;
      height: 80rpx;
      background: linear-gradient(135deg, #fc4f91 0%, #fd6ce6 100%);
      border-radius: 4rpx;
      display: flex;
      justify-content: center;
      align-items: center;

      image {
        width: 40rpx;
        height: 32rpx;
        object-fit: cover;
      }

      text {
        font-weight: 500;
        line-height: 42rpx;
        font-size: 30rpx;
        color: #fff;
        padding: 0;
        margin: 0;
        padding: 0 10rpx;
      }
    }

    .protocol-wrapper {
      position: absolute;
      top: 739rpx;
      left: 65rpx;
      right: 65rpx;
      font-size: 20rpx;
      text-align: center;
      .protocol {
        color: #fc4f91;
      }
    }
    .icon_close {
      position: absolute;
      top: 732rpx;
      left: 0;
      right: 0;
      margin: 0 auto;
      width: 54rpx;
      height: 118rpx;
    }
  }
}
</style>
